<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES5 传统的数组取值   => 依次取出数组中的每个值 赋值给变量 a, b , c

    // var list = [1, 2, 3];
    // var a = list[0];
    // var b = list[1];
    // var c = list[2];
    // console.log(a, b, c);



    // 解构赋值
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

    // 数组解构 => 对应下标解构(下标一一对应即可)

    // 完全解构
    // var list = [1, 2, 3];
    // var [a, b, c] = [1, 2, 3];
    // console.log(a, b, c);

    // 不完全解构(即等号左边的模式，只匹配一部分的等号右边的数组)
    // var [a, b] = [1, 2, 3];
    // console.log(a, b);
    // var [a, , b] = [1, 2, 3];
    // console.log(a, b);

    // 解构不成功，变量的值就等于undefined。
    // var [a, b, c, d] = [1, 2, 3];
    // console.log(a, b, c, d);

    // 解构过程,可以给变量设置默认值
    // var [a, b, c, d = 0] = [1, 2, 3];
    // 等价于
    // d = d === undefined ? 0 : d; // 给d设置默认值(ES5) => 解构失败时才会使用默认值
    // console.log(a, b, c, d);

    // var [a = 0, b = 0, c = 0, d = 0] = [];
    // console.log(a, b, c, d);

    // 数组解构需要注意:
    // 如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。
    // 报错
    // var [a] = 1;
    // var [a] = false;
    // var [a] = NaN;
    // var [a] = undefined;
    // var [a] = null;
    // var [a] = {};


    // 数组解构升级用法(配合扩展运算符 ... 逆应用 => Rest参数 合并剩余参数)
    // var [a, b, ...c] = [1, 2, 3, 4, 5, 6];  //...c在等到左边 =>  合并剩余参数
    // // a => 1  b=>2  ...c => 3, 4, 5, 6
    // console.log(a, b, c);

    // 注意: Rest 合并剩余参数是必须放在最后
    // var [a, ...b, c] = [1, 2, 3, 4, 5, 6];  // 报错 => Rest element must be last element
    // // a => 1  b=>2  ...c => 3, 4, 5, 6
    // console.log(a, b, c);


    // 解构赋值练习
    var list = [1, 2, [3, 4, [5, 6], 7]];

    // var [a, b, c] = [1, 2, [3, 4, [5, 6], 7]];  
    // console.log(a, b, c);  // c => [3, 4, [5, 6], 7]

    // var [c1, c2, c3, c4] = c;
    // console.log(c1, c2, c3, c4);

    // var [c31, c32] = c3
    // console.log(c31, c32);


    // var [a, b, [c1, c2, [c31, c32], c4]] = [1, 2, [3, 4, [5, 6], 7]];
    // console.log(a, b, c1, c2, c31, c32, c4);


    // var [a, b, [c, d, [e, f], g]] = [1, 2, [3, 4, [5, 6], 7]];
    // console.log(a, b, c, d, e, f, g);


    var [a, , [c, d, [e], g]] = [1, 2, [3, 4, [5, 6], 7]];
    console.log(a, c, d, e, g);









</script>

</html>